<template>
	<view class="my-content">
		<view class="account-title mt-30">
			<image src="../../static/my/zf1.png" mode="widthFix"></image>
			<text class="color1">微信收款</text>
		</view>
		<view class="form-box">
			<text class="form-title">微信号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.wechat_number" placeholder="请输入微信号" />
			</view>
			<text class="form-title">绑定微信的电话号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.wechat_phone" placeholder="请输入绑定微信的电话号" />
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">微信收款码</text>
			<view class="img-list">
				<view class="img-add" v-if="!userInfo.wechat_pic" @click="uploadPic('wechat_pic')">
					<text>+</text>
				</view>
				<view class="img-item" v-else>
					<image :src="userInfo.wechat_pic" mode="widthFix" @click="uploadPic('wechat_pic')"></image>
				</view>
			</view>
			<text class="num-box">{{ userInfo.wechat_pic ? 1 : 0 }}/1</text>
		</view>
		<view class="account-title">
			<image src="../../static/my/zf2.png" mode="widthFix"></image>
			<text class="color2">支付宝</text>
		</view>
		<view class="form-box">
			<text class="form-title">支付宝号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.alipay_number" placeholder="请输入支付宝号" />
			</view>
			<text class="form-title">绑定支付宝的电话号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.alipay_phone" placeholder="请输入绑定支付宝的电话号" />
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">支付宝收款码</text>
			<view class="img-list">
				<view class="img-add" v-if="!userInfo.alipay_pic" @click="uploadPic('alipay_pic')">
					<text>+</text>
				</view>
				<view class="img-item" v-else>
					<image :src="userInfo.alipay_pic" mode="widthFix"  @click="uploadPic('alipay_pic')"></image>
				</view>
			</view>
			<text class="num-box">{{ userInfo.alipay_pic ? 1 : 0 }}/1</text>
		</view>
		<view class="account-title">
			<image src="../../static/my/zf3.png" mode="widthFix"></image>
			<text class="color3">个人信息</text>
		</view>
		<view class="form-box">
			<text class="form-title">姓名</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.username" placeholder="请输入真实姓名" />
			</view>
			<text class="form-title">电话号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.phone" placeholder="请输入电话号" />
			</view>
		</view>
		<view class="account-title">
			<image src="../../static/my/zf4.png" mode="widthFix"></image>
			<text class="color4">银行账户</text>
		</view>
		<view class="form-box">
			<text class="form-title">开户行</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.bank_name" placeholder="请输入开户行" />
			</view>
			<text class="form-title">银行卡号</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.bank_number" placeholder="请输入银行卡号" />
			</view>
			<text class="form-title">开户行地址</text>
			<view class="form-item">
				<input type="text" v-model="userInfo.bank_address" placeholder="请输入开户行地址" />
			</view>
		</view>
		<view class="btn-box">
			<div class="btn w-full h-90 bg-green center text-white rounded-20 font-bold" @click="save">保存</div>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			photos: [],
			userInfo: {
				// 支付宝账户
				alipay_number: "",
				// 支付宝绑定手机号
				alipay_phone: "",
				// 支付宝收款码
				alipay_pic: "",
				// 开户行地址
				bank_address: "",
				// 开户行
				bank_name: "",
				// 银行卡账号
				bank_number: "",
				// 头像
				headimg: "",
				// 昵称
				nickname: "",
				// 手机号
				phone: "",
				// 用户id
				user_id: "",
				// 姓名
				username: "",
				// 微信号
				wechat_number: "",
				// 微信绑定手机号
				wechat_phone: "",
				// 微信收款码
				wechat_pic: ""
			}
		}
	},
	async onLoad() {
		const res = await this.http("get", "/api/user/user_info");
		this.userInfo = res.data;
		for (const key in this.userInfo) {
			if (this.userInfo[key] == "null") {
				this.userInfo[key] = "";
			}
		}
	},
	methods: {
		async save() {
			uni.showLoading({
				title: "保存中..."
			});
			const res = await this.http("post", "/api/index/edit_user", this.userInfo);
			uni.hideLoading();
			this.toast(res.message);
			setTimeout(() => {
				
				uni.navigateBack();
				
			}, 1500);
		},
		uploadPic(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.userInfo[type] = res.tempFilePaths[0];
					uni.uploadFile({
						url: "https://app.yinuoxinnengyuan.cn/index.php/api/index/uploads",
						filePath: res.tempFilePaths[0],
						name: "file",
						success: (res) => {
							res = JSON.parse(res.data);
							this.userInfo[type] = res.data.pic_path;
						}
					});
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.account-title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;

		image {
			width: 48upx;
			height: auto;
			display: block;
			margin-right: 10upx;
		}

		text {
			font-size: 36upx;
		}

		.color1 {
			color: #00B578;
		}

		.color2 {
			color: #3662EC;
		}

		.color3 {
			color: #FA5151;
		}

		.color4 {
			color: #FF8F1F;
		}
	}

	.form-box {
		width: 100%;
		border-radius: 16upx;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		.form-title {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
			display: block;
		}

		.form-item {
			margin: 20upx 0;
			font-size: 32upx;
		}

		.img-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 20upx 0 5upx 0;

			.img-add {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
				background: #F1F1F1;

				text {
					font-size: 60upx;
					color: #A6A6A6;
					line-height: 120upx;
					text-align: center;
					display: block;
				}
			}

			.img-item {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
				overflow: hidden;
				margin-left: 15upx;

				image {
					width: 100%;
					height: auto;
					display: block;
				}
			}
		}

		.num-box {
			display: block;
			width: 100%;
			text-align: right;
			font-size: 32upx;
			color: #A6A6A6;
		}
	}
}
</style>